<template>
	<view>
		<view class="box">
			<h1>￥{{bond}}</h1>
			<p style="font-size: 18px;font-weight: 600;margin-bottom: 20px;">支付方式</p>
			<p>
				<image src="../../static/zf.png" style="width: 29px; height: 29px; margin-right: 10px;" mode=""></image>
				微信支付 <view style="width: 60%;"></view> <span style="float: right;">
					<radio shape="square" style="transform: scale(0.8);" :checked="true" />
				</span>
			</p>
		</view>
		<view style="height: 100px;"></view>
		<button @click="zhifu()">支付</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "", //分享id
				type: "", //类型 1老板 2司机
				car_plate: "", //车牌号
				bond: "", //保证金
				car_id: "", //车辆id
				share_id: "",
			}
		},
		onLoad(open) {
			this.id = open.id;
			this.share_id = open.id;
			this.type = open.type;
			this.car_plate = open.car_plate;
			this.bond = open.bond;

			this.getCarInfo();
		},
		methods: {
			getCarInfo() {
				let data = {
					share_id: this.id,
					car_plate: this.car_plate,
					type: this.type,
				}
				this.$rqt.getCarInfo(data).then(res => {
					this.car_id = res.data.id;
				})
			},
			zhifu() {
				//保证金缴纳
				// create_bond_order: data => post('/api/bond/create_bond_order', data, true, true),
				// 如果保证金为0
				let that = this;
				if (this.bond <= 0) {
					setTimeout(() => { //支付成功跳转
						uni.navigateTo({
							url: '/pages/index/zhifuchenggong?id=' + this.share_id + '&type=' + this.type
						});
						// callback()
					}, 1200)
				} else {
					let data = {
						share_id: this.id, //分享id
						type: this.type, //类型 1老板 2司机
						car_id: this.car_id //车辆id
					}
					this.$rqt.create_bond_order(data).then(res => {
						console.log(res);
						//订单对象，从服务器获取
						var orderInfo = {
							appId: res.data.payinfo.appId, // 应用ID（AppID）
							partnerid: res.data.payinfo.partnerid, // 商户号（PartnerID）
							prepayid: res.data.bond_order_sn, // 预支付交易会话ID
							package: res.data.payinfo.package, // 固定值
							nonceStr: res.data.payinfo.nonceStr, // 随机字符串
							timeStamp: res.data.payinfo.timeStamp, // 时间戳（单位：秒）
							paySign: res.data.payinfo.paySign // 签名，这里用的 MD5 签名
						};

						console.log(orderInfo);

						// 如果保证金为0 
						if (this.bond <= 0) {

						} else {
							uni.getProvider({ //获取支付类型
								service: 'payment',
								success(reson) {
									let result = orderInfo; //接口返回数据		

									uni.requestPayment({ //下面参数为必传
										provider: "wxpay", //支付类型
										appId: result.appId, //小程序Appid
										timeStamp: result.timeStamp, //创建订单时间戳
										nonceStr: result.nonceStr,
										package: result.package, // 订单包
										signType: 'MD5', // 加密方式统一'MD5'
										paySign: result.paySign, // 后台支付签名返回
										success(res) {
											// showTips('支付成功')
											uni.showToast({ title: "支付成功" })
											console.log('支付成功12res this.share_id: ');
											setTimeout(() => { //支付成功跳转
												uni.navigateTo({
													url: '/pages/index/zhifuchenggong?id=' +
														that.share_id + '&type=' +
														that.type
												});
												// callback()
											}, 1200)
										},
										fail(err) {
											uni.showToast({
												title: "支付失败"
											})
											setTimeout(() => { //支付失败跳转
												// callback()
											})
										}
									})
								}
							})
						}

					})

				}

			}
		}
	}
</script>

<style scoped>
	button {
		width: 90%;
		margin: 0 auto;
		height: 50px;
		background: #1890FF;
		box-shadow: 0px 0px 4px 0px rgba(204, 204, 204, 0.5);
		border-radius: 25px;
		font-size: 18px;
		font-weight: 600;
		color: #FFFFFF;
	}

	.box {
		overflow: hidden;
	}

	.box>h1 {
		margin-top: 95px;
		color: #f00;
		text-align: center;
	}

	.box>p {
		width: 90%;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}
</style>